/**
 * 欢迎页面
 */
import React from 'react';
import { PageContainer } from '@ant-design/pro-components';
import { Card, Row, Col, Statistic, Typography, Space, Button } from 'antd';
import { 
  MailOutlined, 
  DatabaseOutlined, 
  FileTextOutlined, 
  SettingOutlined,
  UserOutlined,
  SendOutlined 
} from '@ant-design/icons';
import { history, useModel } from '@umijs/max';

const { Title, Paragraph } = Typography;

const Welcome: React.FC = () => {
  const { initialState } = useModel('@@initialState');
  const { currentUser } = initialState || {};

  const quickActions = [
    {
      title: '发送邮件',
      icon: <SendOutlined />,
      description: '立即发送邮件或创建定时任务',
      path: '/email/send',
      color: '#1890ff',
    },
    {
      title: '数据源管理',
      icon: <DatabaseOutlined />,
      description: '管理MySQL、CSV、Excel数据源',
      path: '/datasources',
      color: '#52c41a',
    },
    {
      title: '邮件模板',
      icon: <FileTextOutlined />,
      description: '创建和管理邮件模板',
      path: '/templates',
      color: '#fa8c16',
    },
    {
      title: '邮件配置',
      icon: <SettingOutlined />,
      description: '配置SMTP邮件服务器',
      path: '/email-configs',
      color: '#722ed1',
    },
  ];

  const handleQuickAction = (path: string) => {
    history.push(path);
  };

  return (
    <PageContainer
      header={{
        title: '欢迎使用邮件统一发送平台',
        breadcrumb: {},
      }}
    >
      <div style={{ padding: '0 24px' }}>
        {/* 用户欢迎信息 */}
        <Card style={{ marginBottom: 24 }}>
          <Row align="middle">
            <Col flex="auto">
              <Space size="large">
                <UserOutlined style={{ fontSize: 48, color: '#1890ff' }} />
                <div>
                  <Title level={3} style={{ margin: 0 }}>
                    欢迎回来，{currentUser?.username || '用户'}！
                  </Title>
                  <Paragraph style={{ margin: '8px 0 0 0', color: '#666' }}>
                    您的角色：{currentUser?.role === 'admin' ? '管理员' : '普通用户'} | 
                    邮箱：{currentUser?.email || '未设置'}
                  </Paragraph>
                </div>
              </Space>
            </Col>
          </Row>
        </Card>

        {/* 统计信息 */}
        <Row gutter={16} style={{ marginBottom: 24 }}>
          <Col span={6}>
            <Card>
              <Statistic
                title="邮件模板"
                value={0}
                prefix={<FileTextOutlined />}
                valueStyle={{ color: '#3f8600' }}
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="数据源"
                value={0}
                prefix={<DatabaseOutlined />}
                valueStyle={{ color: '#cf1322' }}
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="邮件配置"
                value={0}
                prefix={<SettingOutlined />}
                valueStyle={{ color: '#1890ff' }}
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="发送任务"
                value={0}
                prefix={<MailOutlined />}
                valueStyle={{ color: '#722ed1' }}
              />
            </Card>
          </Col>
        </Row>

        {/* 快捷操作 */}
        <Card title="快捷操作" style={{ marginBottom: 24 }}>
          <Row gutter={[16, 16]}>
            {quickActions.map((action, index) => (
              <Col span={6} key={index}>
                <Card
                  hoverable
                  style={{ textAlign: 'center', height: '100%' }}
                  onClick={() => handleQuickAction(action.path)}
                >
                  <div style={{ fontSize: 32, color: action.color, marginBottom: 16 }}>
                    {action.icon}
                  </div>
                  <Title level={4} style={{ margin: '0 0 8px 0' }}>
                    {action.title}
                  </Title>
                  <Paragraph style={{ margin: 0, color: '#666' }}>
                    {action.description}
                  </Paragraph>
                </Card>
              </Col>
            ))}
          </Row>
        </Card>

        {/* 系统介绍 */}
        <Card title="系统介绍">
          <Row gutter={24}>
            <Col span={12}>
              <Title level={4}>功能特性</Title>
              <ul style={{ paddingLeft: 20 }}>
                <li>支持多种数据源（MySQL、CSV、Excel）</li>
                <li>富文本和Markdown邮件模板</li>
                <li>动态数据绑定和变量替换</li>
                <li>定时发送和批量发送</li>
                <li>完整的发送日志和统计</li>
                <li>用户权限管理</li>
              </ul>
            </Col>
            <Col span={12}>
              <Title level={4}>使用流程</Title>
              <ol style={{ paddingLeft: 20 }}>
                <li>配置邮件服务器（SMTP）</li>
                <li>添加数据源（联系人信息）</li>
                <li>创建邮件模板</li>
                <li>发送邮件或创建定时任务</li>
                <li>查看发送日志和统计</li>
              </ol>
            </Col>
          </Row>
        </Card>
      </div>
    </PageContainer>
  );
};

export default Welcome;
